<template>
  <div style="padding: 10px">
    <d-select :options="options" v-model="selectValue" multiple>
      <!-- 自定义头部插槽 -->
      <template #header>
        <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
          全选
        </el-checkbox>
      </template>
      <!-- 自定义尾巴插槽 -->
      <template #footer>我就是插槽个尾巴</template>
      <!-- 选项自定义插槽 -->
      <template #slotName="{ scope }">{{ scope }}</template>
    </d-select>
    <p>selectValue值：{{ selectValue }}</p>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  const options = ref([
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3', slot: 'slotName' }
  ])
  const selectValue = ref<Array<string>>([])
  const checkAll = ref(false)
  const indeterminate = ref(false)
  watch(selectValue, val => {
    if (val.length === 0) {
      checkAll.value = false
      indeterminate.value = false
    } else if (val.length === options.value.length) {
      checkAll.value = true
      indeterminate.value = false
    } else {
      indeterminate.value = true
    }
  })

  const handleCheckAll = val => {
    indeterminate.value = false
    if (val) {
      selectValue.value = options.value.map(_ => _.value)
    } else {
      selectValue.value = []
    }
  }
</script>

<style scoped></style>
